<script setup lang="ts">
import b1 from '@/assets/b1.mp4'
import b3 from '@/assets/b3.mp4'
import IconCloseCircleOutlined from '@/components/icons/IconCloseCircleOutlined.vue'
import LotteryGift from '@/components/LotteryGift.vue'
import LotteryHeading from '@/components/LotteryHeading.vue'
import LotteryNumber from '@/components/LotteryNumber.vue'
import LotteryWonWinners from '@/components/LotteryWonWinners.vue'
import { LotteryDrawingStatus } from '@/enums/lottery'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()
</script>

<template>
  <main class="relative w-screen h-screen">
    <video class="w-full h-full object-cover" :src="b1" autoplay loop></video>
    <div class="absolute top-0 left-0 w-screen h-screen">
      <div class="h-full flex flex-col justify-between items-center">
        <template v-if="appStore.drawingStatus === LotteryDrawingStatus.NOT_STARTED">
          <LotteryHeading />
          <LotteryGift />
          <LotteryNumber />
        </template>
        <template v-else-if="appStore.drawingStatus === LotteryDrawingStatus.IN_PROGRESS">
          <div></div>
        </template>
        <template v-else>
          <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
            <video v-if="!appStore.lastWinnersVisible" :src="b3" autoplay></video>
            <div
              v-else
              class="relative border border-orange-500 rounded px-10 py-6 flex flex-wrap max-w-lg h-96 overflow-y-auto"
            >
              <button
                class="absolute top-1 right-2 text-lg text-orange-500"
                @click.stop="appStore.closeLastWinners"
              >
                <IconCloseCircleOutlined />
              </button>
              <div v-for="winner in appStore.lastWinners" :key="winner.id" class="m-4">
                <div class="flex flex-col justify-center items-center">
                  <img class="rounded-full w-12 h-12 object-contain" :src="winner.avatarUrl" />
                  <div class="mt-2 text-white text-ellipsis">{{ winner.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <LotteryWonWinners :winners="[]" />
    </div>
  </main>
</template>
